import React from 'react';
import styles from './index.less';
import { Avatar, Card, Empty } from 'antd';
import { FileTextOutlined } from '@ant-design/icons';
import { Link } from 'umi';
import moment from 'moment';
import {pageList} from '@/services/CheckBook';

const logos = [
  {value: <FileTextOutlined style={{ color: '#fff' }} />, backgroundColor: "#219653"},
  {value: <FileTextOutlined style={{ color: '#fff' }} />, backgroundColor: "#2F80ED"},
  {value: <FileTextOutlined style={{ color: '#fff' }} />, backgroundColor: "#EB5757"},
  {value: <FileTextOutlined style={{ color: '#fff' }} />, backgroundColor: "#9B51E0"},
  {value: <FileTextOutlined style={{ color: '#fff' }} />, backgroundColor: "#F2994A"},
  {value: <FileTextOutlined style={{ color: '#fff' }} />, backgroundColor: "#4F4F4F"}
];

class Task extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      list: [],
      isloading: false
    };
  }

  /* 获取任务列表 */
  getTaskList = async () => {
    try {
      this.setState({isloading: true})
      const res = await pageList({
        status: 2,
        pageNo: 1,
        pageSize: 6
      })
      this.setState({list: res.data.map((item, index) => {
        return {
          id: item.id,
          title: item.name,
          logo: logos[index].value,
          backgroundColor: logos[index].backgroundColor,
          description: item.remark,
          updatedAt: item.startDate,
          member: '进度：' + (item.finishRate || 0),
          href: '/management/checkBook/detail?id=' + item.id
        }
      })})
    } catch (e) {
      console.error(e)
    } finally {
      this.setState({isloading: false})
    }
  }

  componentDidMount () {
    this.getTaskList();
  }

  render() {
    const list = this.state.list;
    const isloading = this.state.isloading;

    return (
      <Card
        className={styles.projectList}
        style={{marginBottom: 24 }}
        title="进行中清查任务"
        bordered={false}
        extra={<Link to="/management/checkBook">全部任务</Link>}
        loading={isloading}
        bodyStyle={{height: 290, padding: 0 }}>
        {list.length > 0 ? list.map((item) => (
          <Card.Grid className={styles.projectGrid} key={item.id}>
            <Card bodyStyle={{ padding: 0 }} bordered={false}>
              <Card.Meta
                title={
                  <div className={styles.cardTitle}>
                    <Avatar size="small" style={{ backgroundColor: item.backgroundColor }} icon={item.logo} />
                    <Link to={item.href}>{item.title}</Link>
                  </div>
                }
                description={item.description}
              />
              <div className={styles.projectItemContent}>
                <div>{item.member || ''}</div>
                {item.updatedAt && (
                  <span className={styles.datetime} title={item.updatedAt}>
                    {moment(item.updatedAt).fromNow()}
                  </span>
                )}
              </div>
            </Card>
          </Card.Grid>
        )) : <div style={{marginTop: 100}}> <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} /> </div>}
      </Card>
    )
  }
}

export default Task
